<template>
	<view>
		<view class="title">{{data.title}}</view>
			<image  v-if="data.image" :src="data.image" ></image>
		<view class="content"  v-html="data.content"></view>
		<video v-if="data.video" :src="data.video" controls style="width: 100%;padding-bottom: 50rpx;"></video>
		<view class="goods" v-if="data.good" :data-url="'/pages/goods/goods?id=' + data.good.goods_id" @click.stop="gotopage">
			<image class="g_img" :src="data.good.image"></image>
			<view class="g_con">
				<view class="g_tit">{{data.good.name}}</view>
				<view class="g_price">￥{{data.good.price}}</view>
			</view>
		</view>
		<view class="clock" v-if='data.type==13'>
			<view class="clock_con" :style="praise ? 'background:#4d726f':''" @click="praiseFun">
				<view class="iconfont c_icon">&#xe65f;</view>
				<view class="clock_txt">
					<label v-if="praise">已赞</label>
					<label v-else>点赞</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
let timer = '';
export default {
	data() {
		return {
			data:'',
			id:0,
			time:10,
			p_flag:false,
			praise:false,
		};
	},
	onShareAppMessage(res) {
		console.log('分享', res);
	
		return {
			title: '汉家承',
			path: "/pages/notice/noticecontent?id="+this.id,
			imageUrl: '',
			desc: '',
			content: '',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	onShareTimeline(res) {
		console.log('分享', res);
	
		return {
			title: '汉家承',
		    path: "/pages/notice/noticecontent?id="+this.id,
			imageUrl: '',
			desc: ' ',
			content: ' ',
			success(res) {
				uni.showToast({
					title: '分享成功'
				});
			},
			fail(res) {
				uni.showToast({
					title: '分享失败',
					icon: 'none'
				});
			}
		};
	},
	onLoad(e) {
		let me  = this;
		    me.id=e.id;
			me.Net._get('hd',{id:e.id},(res)=>{
				if(res.code ==1){
					console.log(res.data)
					me.data=res.data
					me.time=res.data.s
					me.praise=res.data.praise
				}
			});
			timer = setInterval(function(){
				if(me.time <= 0){
					me.p_flag = true;
					clearInterval(timer)
				}
				me.time--;
			},1000)
	},
	onUnload() {
		clearInterval(timer)
	},
	methods: {
		praiseFun(){
			let time=this.time
			if(this.praise) return
			if(!this.p_flag){
				uni.showToast({
					title:'还需浏览'+time+'秒',
					icon:'none',
				})
				return
			}
			//可点赞
			this.praise = true;
			let me  = this;
				me.Net._get('zd',{nid:me.id},(res)=>{
					if(res.code ==1){
						uni.showToast({
							title:res.msg,
							icon:'none',
						})
					}
				});
		},
		gotopage(e) {
			let url = e.currentTarget.dataset.url;
			uni.navigateTo({
				url: url
			});
		},
	}
};
</script>

<style>
	image{
	width: 100% !important;
	/* //height: auto !important; */
	}
	img{
	width: 100% !important;
	/* //height: auto !important; */
	}
	page{
		background-color: #f8f8f8;
	}
	.title{
	width: 92%;
	margin: 4% 4%;
	box-sizing: border-box;
	text-align: center;
	font-size: 5vw;
	font-weight: bold;
	color: #333;
	display: inline-block;
	padding-bottom: 30rpx;
	border-bottom: 1rpx solid #eaeaea;
	}
	.content{
		padding: 0 10px;
		font-size: 12px;
		color: #333;
		text-align: 2em;
		padding-bottom: 50rpx;
	}
	
	.goods{
		width: calc(100% - 60rpx);
		margin-left: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 20rpx 50rpx;
		margin-top: 80rpx;
		box-shadow: 5rpx 5rpx 10rpx #e8e8e8;
		display: flex;
	}
	.goods .g_img{
		width: 24vw !important;
		height: 24vw !important;
		border-radius: 15rpx;
	}
	.goods .g_con{
		flex: 1;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx 0;
	}
	.goods .g_con .g_tit{
		font-size: 30rpx;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		color: #333333;
	}
	.goods .g_con .g_price{
		color: #fe4816;
		font-size: 4vw;
		font-weight: bold;
	}
	.clock{
		position: fixed;
		bottom: 25vh;
		z-index: 10;
		right: 25rpx;
	}
	.clock .clock_con{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: rgba(156, 156, 156, 0.9);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
	.clock_con .c_icon{
		font-size: 40rpx;
	}
	.clock_con .clock_txt{
		font-size: 26rpx;
	}
</style>
